<style>
    #question {
        position: absolute;
        top: 50px;
        bottom: 20px;
        left: 0;
        right: 0;
        width: 50%;
        background: #f3f3f3;
        margin: auto;
        box-sizing: border-box;
        border: 1px solid #cecece;
    }

    .top {
        height: 80%;
        border-bottom: 1px solid #cecece;
        padding: 100px;
        box-sizing: border-box;
    }

    .bottom {
        height: 20%;
        box-sizing: border-box;
        padding: 20px;
    }

    #desc {
        line-height: 30px;
        padding: 20px;
        font-size: 16px;
        color: #00a2d4;
    }

    #result {
        line-height: 40px;
        padding: 0 40px;
    }

    #total {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        line-height: 50px;
        height: 50px;
        padding-left: 20px;
        background: #E3E3E3;
    }

    #total .title {
        color: black;
        font-size: 16px;
    }

    #total .count {
        margin-left: 20px;
        font-size: 12px;
    }

    .bottom .time {
        position: absolute;
        bottom: 0;
        line-height: 40px;
    }

    #btn-commit {
        position: absolute;
        right: 20px;
        bottom: 20px;
    }
</style>
<div class="fsh-pop">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>考试系统</legend>
    </fieldset>

    <div id="question">
        <div class="top">
            <div id="total">
                <label class="title">CG基础测试 </label>
                <label class="count"> 共有10题，当前第1题 </label>
            </div>
            <div id="desc">
                1、（单选）这个月有几天? 这个月有几天? 这个月有几天? 这个月有几天? 这个月有几天? 这个月有几天? 这个月有几天?
            </div>
            <div id="result" class="layui-form">
                <p>
                    <input type="checkbox" lay-skin="primary">A.30天
                </p>
                <p>
                    <input type="checkbox" lay-skin="primary">B.20天
                </p>
                <p>
                    <input type="checkbox" lay-skin="primary">C.10天
                </p>
                <p>
                    <input type="checkbox" lay-skin="primary">D.15天
                </p>
            </div>
        </div>
        <div class="bottom">
            <button class="layui-btn layui-btn-warm layui-btn-sm">上一题</button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" style="margin-left: 30px">下一题</button>
            <div class="time">
                考试总时间：02:00:00
            </div>
            <button class="layui-btn layui-btn-danger" id="btn-commit">交卷</button>
        </div>

    </div>
</div>


<script type="text/javascript">
    layui.use(['upload', 'form'], function () {
        var upload = layui.upload;
        var form = layui.form;
        form.render();

        $('#btn-commit').click(function () {
            layer.open({
                type: 1
                ,title:'考核结束'
                ,offset: 'auto'
                ,id: 'exam-result' //防止重复弹出
                ,content: '<div style="width: 300px;height: 160px;box-sizing: border-box">' +
                    '<p style="color: #aa1111;font-size: 18px;text-align: center;padding-top: 50px">我的考核得分:90分！</p>' +
                    '<div style="position: absolute;right: 10px;bottom: 20px;border-radius: 50%;width: 40px;height: 40px;border: 1px solid #aa1111;' +
                    'box-sizing: border-box;text-align: center;font-size: 5px;padding-top: 2px;color: #aa1111">查询</br>结果</div></div>'
                ,btnAlign: 'c' //按钮居中
                ,shade: 0.2 //不显示遮罩
            });
        });
    });

</script>
